<template>
  <div class="movielist" ref="allmovie">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
    >
      <ul>
        <li v-for="item in movieList" :key="item.id" >
          <img class="post" @click="toPage(item.id)" :src="item.picture"  alt="sss">

          <div class="main">
            <div class="name van-ellipsis"  > {{item.movieName}}</div>

            <div class="score" v-if="item.rate === 0"> 评分：暂无</div>
            <div class="score" v-else> 评分： <span>{{item.rate}}</span> </div>

            <div class="stars van-ellipsis">主演：{{ item.actor }}</div>
            <div class="num">时长：{{item.time}}分钟</div>
          </div>

          <button class="pre" v-if="timeCheck(item.showTime)" @click="toCinemaPage(item.movieId)">购票</button>
          <button v-else>预售</button>
        </li>
      </ul>
      <van-empty v-if="movieList.length==0" description="这里什么都没有" />
    </van-list>
    </van-pull-refresh>

  </div>
</template>

<script>
// import BScroll from 'better-scroll';
import {getAllMovie} from "@/api/movie";

export default {
  name: 'Now',
  props:{
    movieType:{
      type: String,
      default:""
    }
  },
  data(){
    return{
      refreshing: false,
      movieList:[],
      loading: false,
      finished: false,
      pageNum:1,
      page:null,
    }
  },
  //mounted(){
  activated(){
    // var cityId = this.$store.state.city.id;
    // this.axios.get('/api/movieOnInfoList?cityId=' + cityId).then((res) => {
    //   this.movieList = res.data.data.movieList;
    //   console.log(this.movieList);
    //   // 先加载数据之后才能使用better-scroll,所以需要nextTick
    //   //   this.$nextTick(() => {
    //   //       var getdom = this.$refs.allmovie;
    //   //       new BScroll(getdom, {click:true});
    //   //   });
    //
    // })
  },
  methods: {
    //跳转至详情页
    toPage: function(xid){
      this.$router.push('/movie/detail/'+ xid);
    },
    toCinemaPage: function(id){
      this.$router.push('/cinema?mid='+ id);
    },
    onLoad() {
      console.log(this.movieType)
      let movieType = this.movieType
      // 异步更新数据
      if (this.refreshing) {
        this.movieList = [];
        this.pageNum = 1;
        this.page = null;
        this.refreshing = false;
      }
      if(this.page===null||this.pageNum<this.page.pages) {
        console.log("Ss")
        getAllMovie({pageNum: this.pageNum,type:movieType}).then(res => {
          this.page = res.data
          console.log(this.page)
          for (let item of res.data.records) {
            this.movieList.push(item);
          }
          this.pageNum+=1;
        }).catch(err => {
          console.log(err.message);
        })
      }
        this.loading = false
      // 数据全部加载完成
      if (this.page!=null&&this.this.pageNum===this.page.pages){
        this.finished = true;
      }

    },
    onRefresh() {
        // 清空列表数据
        this.finished = false;
        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.onLoad();
    },
    timeCheck(i){
      let t1 = Date.parse(i);
      let t2 = new Date().getTime();
      return t1<t2
    }
  },
  computed:{

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.movielist{
  /* 高度100%作为better-scroll的外层父容器 */
  height: 100%;
  /* z-index:  -1; */
  /* flex: 1; */
  overflow: auto; /**********menu不随列表滑动的关键点**************/
}
ul{
  padding: 0.3rem;
  /* overflow: hidden; ******************************************/
}
li{
  border-bottom: 0.8px solid rgba(211, 210, 210, 0.952);
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  padding: 0.4rem;
}
.post{
  /* padding: 10px; */
  width: 65px;
  margin-right: 0.5rem;
  margin-left: 0.3rem;
}
.main{
  flex: 1;
  position: relative;
}
.name{
  font-size: 0.9rem;
  font-weight: 700;
  font-family: '微软雅黑';
  margin: 0 0 0.6rem 0;
}
.score, .stars, .num{
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
}
span{
  color: chocolate;
  font-weight: 600;
}
.imax{
  position: absolute;
  right: -0.6rem;
  top:0.25rem;
  width: 2.7rem;
}
button{
  color: white;
  background-color: rgb(229,72,71);
  align-self: center;
  width: 2.6rem;
  height: 1.5rem;
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  border: none;
  font-size: 0.7rem;
}
.pre{
  background-color: rgba(24, 169, 226, 0.986);
}
</style>
